<template>
  <div>
    <van-notify v-model:show="show" :background="'#fffaf2'" color="#ff890c" style="font-size: 1.22em">
      <span>最多可以绑定5个就诊人</span>
    </van-notify>
    <van-cell-group style="margin-top: 30px">
      <van-swipe-cell v-for="patient in patientList" :key="patient.id" :before-close="beforeClose(patient.id)">
        <van-cell center clickable size="large">
          <template #icon>
            <img :src="require('@/assets/images/doctor.png')" alt="图片"
                 style="max-width: 60px; max-height: 60px;border-radius: 50%;margin-right: 20px">
          </template>
          <template #title>
            <div class="title-text">
              <div>
                <span style="color: dodgerblue;font-size: 1.2em">{{ patient.Name }}</span>
                <van-tag color="#7232dd" style="margin-left: 5px;">{{ patient.Relation }}</van-tag>
              </div>
              <van-tag type="success">已登记</van-tag>
            </div>
          </template>
          <template #label>
            <p class="label-text">身份证号：{{ patient.identificationNumber }}</p>
          </template>
        </van-cell>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button"/>
        </template>
      </van-swipe-cell>
    </van-cell-group>
  </div>
</template>

<script setup>
import {showConfirmDialog} from 'vant';
import {reactive, ref} from "vue";

const show = ref(true);
const patientList = reactive([
  {
    id: 1,
    Name: '李传伟',
    identificationNumber: '360***********0001',
    Relation: '本人'
  },
  {
    id: 2,
    Name: '曹锦琦',
    identificationNumber: '360***********0002',
    Relation: '朋友'
  },
  {
    id: 3,
    Name: '匡科利',
    identificationNumber: '360***********0038',
    Relation: '朋友'
  }
]);
const beforeClose = (id) => ({ position }) => {
  switch (position) {
    case 'left':
    case 'cell':
    case 'outside':
      return true;
    case 'right':
      return new Promise((resolve) => {
        showConfirmDialog({
          title: '确定删除吗？' + id,
        })
            .then(() => resolve(true))
            .catch(() => resolve(false));
      });
  }
};
</script>

<style scoped>
.delete-button {
  height: 100%;
}

.label-text {
  text-align: left;
  line-height: 1.15;
}

.title-text {
  line-height: 1.15;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
</style>